<template>
  <el-select
    :disabled="disabled"
    style="width: 100%"
    :value="value"
    :placeholder="placeholder"
    filterable
    :multiple="multiple"
    reserve-keyword
    :loading="loading"
    clearable
    @input="handleInput"
  >
    <el-option v-if="show" :key="0" label="全国" :value="0" />
    <el-option
      v-for="option in options"
      :key="option.value"
      :label="option.label"
      :value="option[item]"
    />
  </el-select>
</template>

<script>
import { areas } from '../api/app'
import { academyLevels } from '../api/app'

export default {
  name: 'AreaSelect',
  props: {
    value: {
      type: [String, Number, Array],
      required: true
    },
    placeholder: {
      required: false,
      default: '请输入地区',
      type: [String]
    },
    multiple: {
      required: false,
      default: false,
      type: [Boolean]
    },
    show: {
      required: false,
      default: true,
      type: [Boolean]
    },
    disabled: {
      required: false,
      default: false,
      type: [Boolean]
    },
    item: {
      type: [String],
      default: 'value'
    }
  },
  data() {
    return {
      options: [],
      loading: false
    }
  },
  mounted() {
    this.remoteMethod('')
    academyLevels()
  },
  methods: {
    handleInput(value) {
      this.$emit('input', value)
      this.$emit('change', value)
    },
    remoteMethod(query) {
      this.loading = true
      areas({
        search: query
      }).then((data) => {
        this.options = data
      }).finally(() => {
        // this.options = []
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
